<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath(); //web项目的根路径
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="<%=basePath  %>js/layui2.4.5/css/layui.css">
  <script src="<%=basePath  %>js/jquery.min.js"></script>
  <style type="text/css">
  	.title { background: #000 ; }
  </style>
<body>
<input id="successNumber"  hidden="hidden">
<input id="name"  hidden="hidden">
 

<hr class="layui-bg-red">
<hr class="layui-bg-blue">
<div>
<blockquote class="layui-elem-quote">用户详情</blockquote>
<div class="layui-inline">
   <label class="layui-form-label">用户名</label>
   <div class="layui-input-inline">
     <input type="text" id="userName" name="userName" placeholder="请输入" autocomplete="off" class="layui-input">
   </div>
   <a class="layui-btn search_btn "  id="searchBtn"  data-type="getInfo" style="margin-left: 15px;">查询</a>
</div>
<table id="demo" lay-filter="barDemo"></table>
</div>
<script src="<%=basePath  %>js/layui2.4.5/layui.js"></script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">选中</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证</button>
  </div>
</script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,url: '<%=basePath  %>findListByPage' //数据接口
    ,page: true //开启分页
    ,toolbar: true
    ,limit: 5
    ,limits: [5,10,15]
    ,cols: [[ //表头
       {field: 'userId', title: '用户ID',  sort: true, fixed: 'left' }
      ,{field: 'userName', title: '用户名',templet: function(d){
	  		var flag = d.userName;
			if(flag.indexOf("boss")!=-1){
	      	 	return '<span  style="color: #c00;">'+ d.userName +'</span>'
			}else{
				 return d.userName
			}
		}}
      ,{field: 'userPassword', title: '密码',sort: true}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]]
  });
  
  $('#searchBtn').on('click',function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
  });
  // 点击获取数据
  var  active = {
	getInfo: function () {
		 //更改为获取输入框中输入的用户名
          var userName=$('#userName').val();
		 //不为空 执行带上参数查询的方法
          if (userName != null && userName != '') {
        	  //给一个提示框进行查询
              var index = layer.msg('查询中，请稍候...',{icon: 16,time:false,shade:0});
        	  //延迟800毫秒后执行table.reload方法
              setTimeout(function(){
            	  //layui的表格重载 格式详见Layui文档 数据表格
                  table.reload('demo', {
                      where: {
                         //需要携带的参数
                          'userName':userName
                      }
	                  ,page: {
	                	    curr: 1 //重新从第 1 页开始
	                	  }
                  });
                  layer.close(index);
              },800);
          } else {
        	  table.reload('demo', {where: {
        		  'userName':userName
              }
        	  ,page: {
        		    curr: 1 //重新从第 1 页开始
        		  }
        	  });
          }
      },
  };
	  
  
  
  
  table.on('tool(barDemo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的DOM对象
	 
	  if(layEvent === 'detail'){ //查看
		 layer.open({
			  type: 2,
			  area: ['380px', '272px'],
			  
			  content: '<%=basePath  %>detail',
			  success:function(layero,index){
				  var iframe = parent.window['layui-layer-iframe' + index];
				  iframe.child(data);
                }
		});
	    //do somehing
	  } else if(layEvent === 'del'){ //删除
	     layer.confirm('真的删除行么', function(index){
	      //向服务端发送删除指令
	      $.ajax({  
				type : "get",  //提交方式  
				url : "<%=basePath %>deleteUser",//路径  
				data : {  
				   "userId": data.userId
				},//数据，这里使用的是Json格式进行传输  
				success : function(result) { //返回数据根据结果进行相应的处理 
					if (result.success) {  
						//  obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.msg('已删除', {icon: 6})
						  $(".layui-laypage-btn").click()
					      layer.close(index);
					} else {  
						layer.alert("删除失败请重试")
					}  
				} ,
				error:function(result){
					layer.alert("删除失败请重试")
		        }
				
			});
	    }); 
	  
	  } else if(layEvent === 'edit'){ //编辑
	    //do something
	    layer.open({
			  type: 2,
			  area: ['372px', '273px'],
			  scrollbar: false,
			  content: '<%=basePath  %>toEdit',
			  success:function(layero,index){
				  var iframe = parent.window['layui-layer-iframe' + index];
				  iframe.child(data);
                }
	   		 ,end:function(){
	   			 var name = $("#name").val();
	   			 if($("#successNumber").val()==1){
					  obj.update({
					      userName: name
					    })
				  }
	   		 }
		});
	    //同步更新缓存对应的值
	  /*   obj.update({
	      userName: '123'
	      ,userPassword: 'xxx'
	    }); */
	  }
	});
});
</script>
</body>
</html>